/**
 * 乱写的一个$图片滚动插件
 * @version 0.3.5
 * @author  Zuolong Wang last: 2016
 * 0.3.5 add/fixed: 2016-08-09
 *      +:增加onPause暂停触发事件
 *      +:增加onPauseToGoon暂停到继续触发事件
 *      *:优化代码
 * 0.3.4 add/fixed: 2013-05-09
 *      +:增加animateLock属性。配置动画效果中，是否可触发别的事件
 * 0.3.3 add/fixed: 2013-01-03
 *      +:增加normal模式。可使用参数type设置:slide|fade|normal，默认为slide模式。如果设置为normal模式，将不会有任何动画效果
 *      fixed:自动获取下标问题
 * 0.3.2 add/fixed:
 *      +:增加fade模式。可使用参数type设置:slide|fade，默认为slide模式
 * 0.3.1 add/fixed:
 *      fixed:li元素事件绑定问题，导航无法点击li里面的链接
 *      fixed:修正导航
 *      +:增加导航自定义class
 * 0.3 add/fix:
 *      +:增加几个事件:onStart、onPreScroll、onScrollComplete、onAllComplete
 * 0.2.1 add/fix:
 *      fix:nextId与preId元素不必在滚动内。
 *      fix:垂直滚动宽度问题
 * 0.2 add/fix:
 *      fix:垂直滚动
 * 0.1 add/fix:
 *      +:显示数量。这个和最后滚动的相配合使用
 *      +:滚动数量。
 *      +:增加了许多可配置性选项。
 * 
 * Usage：
 *              <script type="text/javascript" src="js/$.js"></script>
 *              <script type="text/javascript" src="js/$.slideimg.js"></script>
                <script type="text/javascript">
                    <!--
                        $(function(){
                            $('#slider').slideImg({
                                auto:true,  //自动滚动
                                pause:3000, //间隔时间
                                scrollElement:'.insteadImg',    //滚动内容。默认img
                                preId:'leftbutton', //左按钮
                                nextId:'rightbutton'    //右按钮
                            });
                        });
                    //-->
                </script>
 */
(function($){
    
    $.fn.extend({
        slideImg:function(option){
            
            var defaults = {
                type                    : 'slide',
                auto                    : false,
                showNum                 : 1,      //显示数量
                scrollNum               : 1,      //滚动数量。默认:1
                width                   : '',
                controlsShow            : true, //显示向前向后按钮
                continuous              : true, //连续的
                animateCompleted        : true, //正在进行的动画完成才可进行下个动画
                scrollElement           : 'img',  //滚动元素
                scrollElementParentBox  : 'ul', //滚动元素的父级层
                manualScrollEvent       : 'click',
                manualScrollElement     : '',
                manualScrollValueAttr   : 'rel',
                speed                   : 800,  //滚动速度
                pause                   : 2000, //间隔时间
                vertical                : false,    //垂直
                navBarEle               : '',     //导航所在的元素
                navButtonPre            : '',     //导航按钮ID前缀
                navButtonEvent          : 'click',     //导航按钮触发事件
                navButtonEle            : '',     //导航按钮元素
                navButtonFocusClass     : 'on',   //导航按钮选中Class
                navButtonBlurClass      : '',   //导航按钮未选中Class
                preId                   : 'preSp',//向后按钮id
                nextId                  : 'nextSp',//向前按钮id
                repeatForEnd            : true,
                animateLock             : true,     //动画锁，true:执行动画的时候，不能执行其他操作
                onStart                 : function(){}, //开始
                onPreScroll             : function(){}, //每个滚动之前
                onScrollComplete        : function(){}, //每个滚动之后
                onPause                 : function(){},
                onPauseToGoon           : function(){},
                onAllComplete           : function(){}  //所有都滚动完成
            };
            
            
            var option = $.extend({},defaults,option);
        
            this.each(function(){
                var obj = $(this),
                    s = $(option.scrollElement,obj).length,
                    w = $(option.scrollElement,obj).eq(0).outerWidth(true),
                    h = $(option.scrollElement,obj).eq(0).outerHeight(true),
                    st = s-option.scrollNum,
                    timeoutRes = '',
                    stop = false;
                obj.css({
                    'overflow':'hidden'
                });
                var c = 0;
                /**
                 * 导航所在的元素
                 *  默认或为空时，将视为在ojb对象中
                 */
                var navBarObj = option.navBarEle==''?obj:$(option.navBarEle);
            
                if (option.type == 'fade'){
                    $(option.scrollElementParentBox,obj).css('position','relative');
                    $(option.scrollElement,obj).css({
                        'top':0,
                        'left':0,
                        'position':'absolute'
                    })
                    .slice(1).css({'display':'none'});  //初始化
                }else if (option.type == 'normal'){
                    $(option.scrollElement,obj).slice(1).css({'display':'none'});  //初始化
                }else{
                    if (!option.vertical){
                        obj.css({
                            'width':w*option.showNum+'px'
                        });
                        $(option.scrollElementParentBox,obj).css('width',parseInt(s*w)+'px');
                        $(option.scrollElement,obj).css({
                            'float':'left'
                        });
                    }
                }
                
            
            
                if (!option.controlsShow){
                    $('#'+option.preId+',#'+option.nextId,obj).css('display','none');
                }
            
                $('#'+option.preId).click(function(){
                    animate('pre',true);
                    $(this).blur();
                });
                $('#'+option.nextId).click(function(){
                    animate('next',true);
                    $(this).blur();
                });
                
                /**
                 * 切换导航状态
                 */
                var navChange = function(){
                    var n = c+1;
                    $('.'+option.navButtonFocusClass,navBarObj).removeClass(option.navButtonFocusClass).addClass(option.navButtonBlurClass);
                    if (option.navButtonPre!=''){
                        $(option.navButtonEle+'[id="'+option.navButtonPre+n+'"]',navBarObj).addClass(option.navButtonFocusClass);
                    }else{
                        //无设定id前缀时，按结点索引进行查找
                        $(option.navButtonEle,navBarObj).eq(c).removeClass(option.navButtonBlurClass).addClass(option.navButtonFocusClass);
                    }
                }
                /**
                 * 绑定导航切换事件
                 */
                if (option.navButtonEle!=''){
                    $(option.navButtonEle,navBarObj)
                        .bind(option.navButtonEvent,function(e){
                            e.preventDefault();
                            animate($(option.navButtonEle,navBarObj).index($(this)), true);
                        });
                }
                /**
                 * 绑定手动切换元素事件
                 */
                if (option.manualScrollElement!=''){
                    $(option.manualScrollElement)
                        .bind(option.manualScrollEvent,function(e){
                            e.preventDefault();
                            var currentValue;
                            if (option.manualScrollValueAttr!=''){
                                currentValue = $(this).attr(option.manualScrollValueAttr);
                            }else{
                                currentValue = $(option.manualScrollElement).index(this);
                            }
                            animate(parseInt(currentValue,10),false);
                        });
                }
                    
                var call = function(fun){
                    if (typeof(fun) == 'function'){
                        fun();
                    }
                }
            
                /**
                 * 核心
                 */
                var animate = function(dir,clicked){
                    if (s<=option.showNum)
                        return;
                    if ( stop && option.animateLock){
                        return ;
                    }
                    /**
                     * 正在进行的动画完成才可进行下个动画
                     */
                    if (option.animateCompleted){
                        stop = true;
                    }
                    switch(dir){
                        case 'next':
                            if (!option.repeatForEnd && c==st){
                                stop = false;
                                return ;
                            }
                            c = (c==st) ? 0 : ( ((c+option.scrollNum)>st) ? st : c+option.scrollNum ) ;
                            break;
                        case 'pre':
                            if (!option.repeatForEnd && (c-option.scrollNum)<0){
                                stop = false;
                                return ;
                            }
                            c = ((c-option.scrollNum)<0) ? st : c-option.scrollNum ;
                            break;
                        case 'last':
                            c = st;
                            break;
                        case 'first':
                            c = 0;
                            break;
                        default:
                            if (dir>st){
                                stop = false;
                                return;
                            }
                            c = dir;
                            break;
                    }
                    this.c = c;
                    call(option.onPreScroll(dir, s, c));
                
                    var speed = option.speed;
                    if (option.type == 'fade'){
                        $(option.scrollElement,obj).fadeOut(speed);
                        $(option.scrollElement,obj).eq(c).stop().fadeIn(speed,function(){
                            stop = false;
                            //每次滚动完成时执行
                            call(option.onScrollComplete(dir, s, c));
                            //所有都完成时执行
                            if(c==st) call(option.onAllComplete());
                        });
                    }else if(option.type == 'normal') {
                        $(option.scrollElement,obj).hide();
                        $(option.scrollElement,obj).eq(c).show();
                        stop = false;
                        //每次滚动完成时执行
                        call(option.onScrollComplete(dir, s, c));
                        //所有都完成时执行
                        if(c==st) call(option.onAllComplete());
                    }else{
                        if(!option.vertical){
                            var p = (c*w*-1);
                            $(option.scrollElementParentBox,obj).stop().animate({
                                'marginLeft':p
                            },speed,function(){
                                stop = false;
                                //每次滚动完成时执行
                                call(option.onScrollComplete(dir, s, c));
                                //所有都完成时执行
                                if(c==st) call(option.onAllComplete());
                            });
                        }else{
                            var p = (c*h*-1);
                            $(option.scrollElementParentBox,obj).stop().animate({
                                'marginTop':p
                            },speed,function(){
                                stop = false;
                                //每次滚动完成时执行
                                call(option.onScrollComplete(dir, s, c));
                                if(c==st) call(option.onAllComplete());
                            });
                        }
                    }
                    
                    navChange();
                    
                    if (clicked !== true){
                        clearTimeout(timeoutRes);
                        if(option.continuous){
                            timeoutRes = setTimeout(function(){
                                animate('next',false);
                            },option.pause);
                        }
                    }
                }

                //init
                var pause,  //暂停
                    pauseToGoon;    //继续动画
                pause = function(){
                    clearTimeout(timeoutRes);
                    call(option.onPause(s,c));
                };
                pauseToGoon = function(isFirst){
                    if(isFirst !== true) call(option.onPauseToGoon(s,c));
                    if(option.auto){
                        clearTimeout(timeoutRes);
                        timeoutRes = setTimeout(function(){
                            animate('next',false);
                        },option.pause);
                    }
                };
                obj.mousemove(pause).mouseout(pauseToGoon);
                navBarObj.mousemove(pause).mouseout(pauseToGoon);

                pauseToGoon(true);
                call(option.onStart());
            });
        }
    });
})(jQuery)